import React, { useState } from 'react';
import { Outlet } from 'react-router-dom'
import { Layout, theme } from 'antd';
import SiderMenu from '../../components/common/Layout/SiderMenu';
import HeaderComponent from '../../components/common/Layout/Header';
import './index.css'

const { Header, Sider, Content, Footer } = Layout

const Dashboard = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    
    return (
        <Layout style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
            <SiderMenu collapsed={collapsed} />
            <Layout>
                <HeaderComponent collapsed={collapsed} setCollapsed={setCollapsed} />
                <Content
                    style={{
                        flex: 1,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        display: 'flex',
                        flexDirection: 'column',
                        overflow: 'auto'
                    }}
                >
                    <Outlet />
                </Content>
                <Footer style={{ textAlign: 'center', padding: '12px' }}>
                    企业人力资源管理系统 ©{new Date().getFullYear()} Created by HRMS Team
                </Footer>
            </Layout>
        </Layout>
    );
}

export default Dashboard